﻿@model CodeFirstMVC3.Web.ViewModel.RegisterViewModel
@{
    ViewBag.Title = "Register";
}
<h2>
    Create a New Account</h2>
<p>
    Use the form below to create a new account.
</p>
<p>
    Passwords are required to be a minimum of @ViewBag.PasswordLength characters in
    length.
</p>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true, "Account creation was unsuccessful. Please correct the errors and try again.")
    <div>
        <fieldset>
            <legend>Account Information</legend>
            <div class="editor-label">
                @Html.LabelFor(m => m.UserName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.UserName, new { id = "username" })
                @Html.ValidationMessageFor(m => m.UserName)
                <span id="usernameValidate" class="field-validation-error"><span id="xdiv" htmlfor="username"
                    data-valmsg-replace="true"></span></span>
            </div>
            <div class="editor-label">
                @Html.LabelFor(m => m.Email)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.Email)
                @Html.ValidationMessageFor(m => m.Email)
            </div>
            <div class="editor-label">
                @Html.LabelFor(m => m.Password)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(m => m.Password)
                @Html.ValidationMessageFor(m => m.Password)
            </div>
            <div class="editor-label">
                @Html.LabelFor(m => m.ConfirmPassword)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(m => m.ConfirmPassword)
                @Html.ValidationMessageFor(m => m.ConfirmPassword)
            </div>
            <p>
                <input type="submit" value="Register" />
            </p>
        </fieldset>
    </div>
}
<script type="text/javascript">
    $(document).ready(function () {
        $("#username").change(function () {
            var url = '@Url.Action("ExistUsername", "Account")'
            var txtusername = "#username";
            var targetElement = "#xdiv";
            var usernemeVal = $(txtusername).val();
            if (usernemeVal == "") {
                return;
            }
            $.getJSON(url, { username: usernemeVal }, function (data) {
                $(targetElement).empty();
                $("usernameValidate").empty();
                if (data.Success) {
                    $("usernameValidate").removeClass("field-validation-error", 1, 1, this);
                    $(targetElement).append(data.Message);
                }
                else {
                    $(txtusername).addClass("input-validation-error");
                    $(targetElement)._hide().fadeIn().delay(1000).append(
                  data.Message
                  );
                }
            });
        });
    });
</script>
